<template slot-scope="scope">
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
      <!-- 头部添加角色区域 -->
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" @click="addNewRoles">添加角色</el-button>
        </el-col>
      </el-row>

      <!-- 数据展示 -->
      <el-table :data="roleslist" stripe style="width: 100%" border>
        <!-- 展开区域 -->
        <el-table-column header-align="center" align="center" type="expand" />

        <!-- 索引区域 -->

        <el-table-column
          header-align="center"
          align="center"
          type="index"
          label="#"
        />
        <!-- 角色名称区域 -->
        <el-table-column
          header-align="center"
          align="center"
          prop="roleName"
          label="角色名称"
        />
        <!-- 角色描述 -->
        <el-table-column
          header-align="center"
          align="center"
          prop="roleDesc"
          label="角色描述"
        />
        <!-- 操作区域 -->
        <el-table-column
          header-align="center"
          align="center"
          prop="roleDesc"
          label="操作"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editClick(scope.row.id)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
            >删除</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
            >分配权限
            </el-button></template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加角色-->
    <el-dialog
      title="添加角色"
      :visible.sync="rolesdialogVisible"
      width="50%"
      @close="addClose"
    >
      <!-- 添加数据区域 -->
      <el-form
        ref="addFormRefs"
        :model="addNewRoleslist"
        :rules="addNewRules"
        label-width="100px"
      >
        <!-- 角色区域 -->
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model.number="addNewRoleslist.roleName" />
        </el-form-item>

        <!-- 角色描述区域 -->
        <el-form-item label="角色名称" prop="roleDesc">
          <el-input v-model="addNewRoleslist.roleDesc" />
        </el-form-item>
      </el-form>

      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="rolesdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPassRoles">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑区域 -->
    <el-dialog
      title="编辑用户"
      :visible="true"
      width="50%"
      @close="editClose"
    >
      <!-- 表单区域 -->
      <el-form
        ref="editformRef"
        :model="editslist"
        label-width="80px"
        :rules="editRules"
      >
        <!-- 角色id-->
        <el-form-item label="角色ID" prop="roleId">
          <el-input ref="abc" v-model="editslist.roleId" />
        </el-form-item>

        <!-- 角色名称-->
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editslist.roleName" />
        </el-form-item>

        <!-- 角色描述 -->
        <el-form-item label="角色描述 " prop="roleDesc">
          <el-input v-model="editslist.roleDesc" />
        </el-form-item>
      </el-form>

      <!--底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      // 列表数据
      roleslist: [],

      // 确定添加数据
      addNewRoleslist: {
        roleName: '',
        roleDesc: ''
      },

      // 显示添加对话框
      rolesdialogVisible: false,

      // 显示编辑对话框
      editdialogVisible: false,

      // 编辑显示的用户
      editslist: {
        roleId: 123
      },

      // 添加用户验证规则
      addNewRules: {
        roleName: [
          { required: true, message: '请输入正确的信息', trigger: 'blur' },
          // { mix:3, max:5, message: "请输入3到5个字符串", trigger: "blur" },
          { min: 2, max: 10, message: '长度在 2到 10个字符', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入正确的信息', trigger: 'blur' },
          { min: 2, max: 5, message: '请输入2到5个字符串', trigger: 'blur' }
        ]
      },

      // 编辑用户的验证规则、
      editRules: {
        roleId: [
          {
            required: true,
            message: '请输入id',
            trigger: 'blur'
          },
          { min: 2, max: 5, message: '请输入2到5个数字', trigger: 'blur' }

          // { length: 3, trigger: "blur" },
        ],
        roleName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 5, message: '请输入2到5个字符串', trigger: 'blur' }
        ],

        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2到10个字符串', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.getRolesList()
  },
  mounted() {},
  methods: {
    // 根据roles请求数据
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return this.$message.error('查询失败')
      console.log(res.data)
      this.roleslist = res.data
    },

    //  添加按钮
    addNewRoles() {
      this.rolesdialogVisible = true
    },

    // 确定后添加用户
    addPassRoles() {
      this.$refs.addFormRefs.validate(async(vali) => {
        if (!vali) return

        const { data: res } = await this.$http.post(
          'roles',
          this.addNewRoleslist
        )

        if (res.meta.status !== 201) { return this.$message.error('请输入正确的信息') }

        this.$message.success('创建成功')

        this.getRolesList()

        this.rolesdialogVisible = false
      })
    },
    // 添加用户关闭事件
    addClose() {
      this.$refs.addFormRefs.resetFields()
    },

    // 编辑用户
    async editClick(id) {
      this.editdialogVisible = true
      // 通过id查询数据
      const { data: res } = await this.$http.get('roles/' + id)

      if (res.meta.status !== 200) return this.$message.error('查询数据失败')

      this.editslist = res.data
      console.log(res.data)
    },

    // 编辑框关闭事件
    editClose() {
      this.$refs.editformRef.resetFields()
    },

    // 编辑提交事件
    editPass() {
      // 先对表单进行预验证
      console.log(this.editslist.roleId)
      this.$refs.editformRef.validate(async(vali) => {
        console.log(vali)

        if (!vali) return

        const { data: res } = await this.$http.put(
          'roles/' + this.editslist.roleId,
          this.editslist
        )
        if (res.meta.status !== 200) return this.$message.error('提交失败')

        // 关闭窗口
        this.editdialogVisible = false

        this.$message.success('修改成功')
        // 刷新数据
        this.getRolesList()
        console.log(res)
      })
    }
  }
}
</script>

<style  scoped></style>
